<template>
  <div style="padding: 15px;">
    <el-form :inline="true" :model="formInline" class="demo-form-inline">
      <!-- 下拉框 -->
      <el-select v-model="formInline.option" placeholder="请选择">
        <el-option
          v-for="item in options"
          :key="item.value"
          :label="item.label"
          :value="item.value">
        </el-option>
      </el-select>
      <!-- 时间框 -->
      <el-date-picker
        v-model="formInline.time"
        type="daterange"
        range-separator="至"
        start-placeholder="开始日期"
        end-placeholder="结束日期">
      </el-date-picker>
    </el-form>

    <div class="se">
      <div class="kuai">
        <div style="background: rgb(6,219,157)"></div>
        <div>PV</div>
      </div>
      <div class="kuai">
        <div style="background: rgb(255,176,6)"></div>
        <div>UV</div>
      </div>
      <div class="kuai">
        <div style="background: rgb(0,198,255)"></div>
        <div>新增访客</div>
      </div>
      <div class="kuai">
        <div style="background: rgb(246,108,124)"></div>
        <div>新增客户</div>
      </div>
    </div>
    <!-- 图表 -->
    <div style="height: 480px;" ref="SUMEchart"></div>
  </div>
</template>

<script>
import * as Chart from "echarts";

export default {
  data() {
    return {
      // 下拉选项
      options: [
        {
          value: '1',
          label: '销售部'
        }, {
          value: '2',
          label: '技术部'
        }, {
          value: '3',
          label: '教研部'
        }
      ],
      // 搜索表单
      formInline: {
        option: '',
        time: ''
      },
      // 图表
      SUMoption: {
        tooltip: {
          trigger: 'item',
          formatter: "{a} <br/>{b}月 : {c}"
        },
        legend: {
          data: [{
            name: '',
            icon: 'rect'
          }],
          top: 1,
          left: 1,
          itemGap: 10,
          itemWidth: 12,
          itemHeight: 12,
          textStyle: {
            fontSize: 12,
            color: "#323232"
          }
        },
        grid: {
          left: 50,
          right: 10,
          top: 30,
          bottom: 30,
          borderWidth: 1
        },
        xAxis: {
          type: 'category',
          data: ['1', '2', '3', '4', '5', '6', '7', '8', '9', '10', '11', '12'],
          axisLine: {
            lineStyle: {
              color: "#999999",
              width: 1
            }
          },
          axisLabel: {
            margin: 14,
            height: 70,
            interval: 0,
            textStyle: {
              fontSize: 10,
              color: "#999999"
            }
          }
        },
        yAxis: {
          type: 'value',
          axisLine: {
            lineStyle: {
              color: "#999999",
              width: 1
            }
          },
          axisLabel: {
            margin: 14,
            textStyle: {
              fontSize: 10,
              color: "#999999"
            }
          }
        },
        series: [{
          name: '',
          //   type: 'bar',
          type: 'line',
          barGap: 0,
          data: [50000, 70000, 80000, 40000, 50000, 30000, 40000, 60000, 50000, 40000, 60000, 40000],
          barWidth: 10,
          itemStyle: {
            color: "#108ff9"
          }
        }]
      },
    }
  },
  methods: {
    // 图表
    getSUM() {
      this.chart = Chart.init(this.$refs.SUMEchart)
      this.chart.setOption(this.SUMoption)
    },
  },
  mounted() {
    this.getSUM()
  },
  name: "client"
}
</script>

<style scoped>
.se {display: flex;}
.se .kuai {margin: 10px 10px 0 10px; display: flex; line-height: 15px;}
.se .kuai>div:nth-child(1){height: 15px; width: 18px;}
</style>
